<script lang="ts" setup>
import {ref, reactive, computed, onMounted} from 'vue'
import PendingList from "@/views/Test/components/Test7/components/PendingList.vue";
import ApprovedList from "@/views/Test/components/Test7/components/ApprovedList.vue";
import RunningList from "@/views/Test/components/Test7/components/RunningList.vue";
import HistoryList from "@/views/Test/components/Test7/components/HistoryList.vue";
import WorkFlowConfig from "@/views/Test/components/Test7/components/WorkFlowConfig.vue";

// 菜单项类型定义
interface MenuItem {
  id: number
  name: string
  icon: string
  active: boolean
  count?: number
}

// 菜单数据
const menuItems = reactive<MenuItem[]>([
  {id: 1, name: '我的待办', icon: 'fa-inbox', active: true, count: 5},
  {id: 2, name: '我的已办', icon: 'fa-check-circle', active: false, count: 12},
  {id: 3, name: '运行中实例', icon: 'fa-play-circle', active: false, count: 8},
  {id: 4, name: '历史实例', icon: 'fa-history', active: false},
  {id: 5, name: '流程配置', icon: 'fa-cog', active: false}
])


// 当前活动菜单
const activeMenu = computed(() => menuItems.find(item => item.active))

// 切换菜单
const switchMenu = (id: number) => {
  menuItems.forEach(item => {
    item.active = item.id === id
  })
}

// 搜索关键词
const searchKeyword = ref('')

// 模拟数据加载
const isLoading = ref(true)
onMounted(() => {
  setTimeout(() => {
    isLoading.value = false
  }, 1200)
})
</script>

<template>
  <div class="workflow-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <div class="logo-icon">
          <i class="fas fa-diagram-project"></i>
        </div>
        <span>工作流监控</span>
      </div>

      <div class="menu-section">
        <span class="section-label">工作流菜单</span>
        <ul class="menu">
          <li
              v-for="item in menuItems"
              :key="item.id"
              :class="{ active: item.active }"
              @click="switchMenu(item.id)"
          >
            <div class="menu-item-content">
              <i :class="item.icon" class="fas"></i>
              <span>{{ item.name }}</span>
              <span v-if="item.count" class="menu-badge">{{ item.count }}</span>
            </div>
            <div class="active-indicator"></div>
          </li>
        </ul>
      </div>

      <div class="sidebar-footer">
        <div class="process-stats">
          <div class="stat">
            <span class="stat-value">28</span>
            <span class="stat-label">今日待办</span>
          </div>
          <div class="stat">
            <span class="stat-value">15</span>
            <span class="stat-label">进行中</span>
          </div>
          <div class="stat">
            <span class="stat-value">92%</span>
            <span class="stat-label">完成率</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="header">
        <div class="breadcrumb">
          <span>工作流</span>
          <i class="fas fa-chevron-right"></i>
          <span>{{ activeMenu?.name }}</span>
        </div>

        <div class="header-actions">
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input
                v-model="searchKeyword"
                placeholder="搜索流程、任务..."
                type="text"
            >
          </div>

          <div class="action-buttons">
            <button class="btn-icon">
              <i class="fas fa-sync-alt"></i>
            </button>
            <button class="btn-icon">
              <i class="fas fa-bell"></i>
              <span class="badge">5</span>
            </button>
            <button class="btn-icon">
              <i class="fas fa-user"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="content">
        <!-- 加载状态 -->
        <div v-if="isLoading" class="loading-state">
          <div class="spinner"></div>
          <p>加载工作流数据...</p>
        </div>

        <!-- 我的待办 -->
        <div v-else-if="activeMenu?.id === 1" class="task-list-container">
          <PendingList></PendingList>
        </div>

        <!-- 我的已办 -->
        <div v-else-if="activeMenu?.id === 2" class="task-list-container">
          <ApprovedList></ApprovedList>
        </div>

        <!-- 运行中实例 -->
        <div v-else-if="activeMenu?.id === 3" class="process-container">
          <RunningList/>
        </div>

        <!-- 历史实例 -->
        <div v-else-if="activeMenu?.id === 4" class="process-container">
          <HistoryList/>
        </div>

        <!-- 流程配置 -->
        <div v-else-if="activeMenu?.id === 5" class="config-container">
          <WorkFlowConfig/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.workflow-container {
  display: flex;
  min-height: 100%;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #f8fafc;
  color: #334155;
}

/* 侧边栏样式 */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.logo {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-section {
  padding: 24px 0;
  flex-grow: 1;
}

.section-label {
  display: block;
  padding: 0 24px 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
  font-weight: 600;
}

.menu {
  list-style: none;
}

.menu li {
  position: relative;
  margin: 4px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu li:hover {
  background: rgba(255, 255, 255, 0.05);
}

.menu li.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0) 100%);
}

.menu li.active .active-indicator {
  opacity: 1;
}

.active-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #6366F1;
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.menu-item-content {
  padding: 12px 16px 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-item-content i {
  width: 18px;
  text-align: center;
  color: #94A3B8;
}

.menu li.active .menu-item-content i {
  color: #6366F1;
}

.menu li.active .menu-item-content span {
  color: white;
}

.menu-badge {
  background: #EF4444;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.process-stats {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-weight: 700;
  font-size: 1.2rem;
}

.stat-label {
  font-size: 0.7rem;
  color: #94A3B8;
  margin-top: 4px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background-color: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 5;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #64748B;
}

.breadcrumb span:last-child {
  color: #334155;
  font-weight: 500;
}

.breadcrumb i {
  font-size: 0.7rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  position: relative;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 0.9rem;
}

.search-box input {
  padding: 10px 15px 10px 38px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  width: 280px;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
  background: #F8FAFC;
}

.search-box input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.2s ease;
  position: relative;
}

.btn-icon:hover {
  background: #F1F5F9;
  color: #475569;
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: white;
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

/* 加载状态 */
.loading-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E2E8F0;
  border-top: 3px solid #6366F1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.page-header p {
  color: #64748B;
}

/* 任务列表 */
.task-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.task-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}


.task-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}


/* 流程列表 */
.process-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}


.process-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}


/* 配置页面 */
.config-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.deployed-processes h2 {
  color: #1E293B;
  margin-bottom: 16px;
  font-weight: 600;
}

@media (max-width: 968px) {
  .workflow-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
  }

  .menu {
    display: flex;
    overflow-x: auto;
    padding: 0 16px 8px;
  }

  .menu li {
    flex-shrink: 0;
    margin: 4px 8px;
  }

  .active-indicator {
    display: none;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .search-box input {
    width: 100%;
  }

  .task-meta, .task-dates, .process-meta {
    flex-direction: column;
    gap: 8px;
  }
}

</style>